<script>
import moment from "moment";
import Clickoutside from 'element-ui/src/utils/clickoutside';

export default {
  name: "Attendance",
  directives: {Clickoutside},
  data() {
    return {
      size: 10,
      month: moment().format('YYYY-MM'),
      daysArray: [],
      highlightColStyle: {},
      highlightRowStyle: {},
      highlightCellStyle: {},
      popperStyle: {},
      tableData: [],
      empName: '',
      type: 'month'
    }
  },
  computed: {
    startDay() {
      return moment(this.month).startOf('month').format('YYYY-MM-DD')
    },
    days() {
      return moment(this.month).daysInMonth()
    }
  },
  methods: {
    clickHeaderRowCell(e) {
      this.clearHighlight()
      this.highlightColStyle = {
        left: e.currentTarget.offsetLeft + 'px',
        top: e.currentTarget.offsetTop + 60 + 'px',
        width: '48px',
        height: 48 * this.size + 'px',
        display: 'block'
      }

      let top = e.currentTarget.offsetTop + 60 + 'px', left = e.currentTarget.offsetLeft + 48 + 'px'
      let attachRight = e.currentTarget.offsetLeft + 280 + 48 > this.$refs.content.getBoundingClientRect().width
      if (attachRight) {
        left = e.currentTarget.offsetLeft - 280 + 'px'
      }
      this.popperStyle = {
        left: left,
        top: top,
        scale: '1'
      }
    },
    handleClickOutside() {
      this.clearHighlight()
    },
    clickHeaderColCell(e, n) {
      this.clearHighlight()
      this.highlightRowStyle = {
        left: e.currentTarget.offsetLeft + 'px',
        top: e.currentTarget.offsetTop + 'px',
        width: 48 * this.days + 'px',
        height: '48px',
        display: 'block'
      }

      let top = e.currentTarget.offsetTop + 48 + 'px', left = e.currentTarget.offsetLeft + 'px'
      let attachBottom = e.currentTarget.offsetTop + 160 + 48 + 48 > this.$refs.content.getBoundingClientRect().height
      if (attachBottom) {
        top = e.currentTarget.offsetTop - 160 - 48 + 'px'
      }
      this.popperStyle = {
        left: left,
        top: top,
        scale: '1'
      }
    },
    clearHighlight() {
      this.highlightCellStyle = {}
      this.highlightColStyle = {}
      this.highlightRowStyle = {}
      this.popperStyle = {}
    },
    clickCell(e, col, day) {
      if (this.tableData[col - 1][day - 1] === false) {
        return
      }
      this.clearHighlight()
      this.highlightCellStyle = {
        left: e.currentTarget.offsetLeft + 'px',
        top: e.currentTarget.offsetTop + 'px',
        width: '48px',
        height: '48px',
        display: 'block'
      }

      let top, left
      let attachBottom = e.currentTarget.offsetTop + 160 + 48 + 48 > this.$refs.content.getBoundingClientRect().height,
          attachRight = e.currentTarget.offsetLeft + 280 > this.$refs.content.getBoundingClientRect().width

      if (attachBottom && !attachRight) {
        left = e.currentTarget.offsetLeft + 'px'
        top = e.currentTarget.offsetTop - 160 - 48 + 'px'
      }

      if (!attachBottom && !attachRight) {
        left = e.currentTarget.offsetLeft + 'px'
        top = e.currentTarget.offsetTop + 48 + 'px'
      }

      if (!attachBottom && attachRight) {
        left = e.currentTarget.offsetLeft - 280 + 'px'
        top = e.currentTarget.offsetTop + 'px'
      }

      if (attachBottom && attachRight) {
        left = e.currentTarget.offsetLeft - 280 + 'px'
        top = e.currentTarget.offsetTop - 160 + 'px'
      }
      this.popperStyle = {
        left: left,
        top: top,
        scale: '1'
      }
      this.$nextTick(() => {
        this.$refs.popper.scrollIntoView({
          behavior: 'smooth',
          block: 'end',
          inline: 'nearest'
        })
      })
    },
    getWeekday(day) {
      let flag = moment(this.startDay).add(day - 1, 'day').format('dddd')
      let str = '';
      switch (flag) {
        case 'Sunday':
          str = '周日'
          break
        case 'Monday':
          str = '周一'
          break
        case 'Tuesday':
          str = '周二'
          break
        case 'Wednesday':
          str = '周三'
          break
        case 'Thursday':
          str = '周四'
          break
        case 'Friday':
          str = '周五'
          break
        case 'Saturday':
          str = '周六'
          break
      }
      return str
    },
  },
  created() {
    for (let i = 0; i < this.size; i++) {
      this.tableData[i] = []
      for (let n = 0; n < this.days; n++) {
        this.tableData[i].push(null)
      }
    }
  },
  mounted() {

  }
}
</script>

<template>
  <div style="padding: 16px;box-sizing: border-box;width: fit-content">
    <div class="tag-container">
      <el-tag color="#f8e6ab" style="border-color: transparent;color: #5c3a00">科技班次（09:00 ~ 11:30,14:00 ~ 18:00）
      </el-tag>
      <el-tag color="#bacefd" style="border-color: transparent;color: #0c296e">默认班次（09:00 ~ 18:00）</el-tag>
      <i class="el-icon-edit"></i>
    </div>
    <div class="divider"></div>
    <div class="search-container">
      <div style="width: 50%;">
        <el-date-picker v-model="month" type="month" size="small" value-format="yyyy-MM"
                        :clearable="false"></el-date-picker>
      </div>
      <div style="text-align: right;width: 50%;">
        <el-input style="width: 200px" placeholder="搜索员工姓名" size="small" v-model="empName"
                  prefix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <div class="attendance-container" ref="container" v-clickoutside="handleClickOutside">
      <div class="column-header">
        <div class="first cell">
          人员
        </div>
        <div class="cell" v-for="n in size" :key="n" @click="clickHeaderColCell($event, n)"></div>
      </div>
      <div class="column-content">
        <div class="row-header">
          <div class="cell" v-for="row in days" :key="row" @click="clickHeaderRowCell($event)">
            <div style="font-size: 12px;">{{ getWeekday(row) }}</div>
            <div style="font-size: 16px;font-weight: 600;margin-top: 4px;">{{ row }}</div>
          </div>
        </div>
        <div ref="content" class="content">
          <div class="row" v-for="col in tableData.length" :key="col">
            <div class="cell" v-for="day in days" :key="day" @click="clickCell($event, col, day)">
              <el-tooltip placement="top" content="无法排班，原因：当日不在考勤组"
                          v-if="tableData[col - 1][day - 1] === false">
                <div class="cell-value break">
                  休息
                </div>
              </el-tooltip>
              <div class="cell-value" v-else>{{ tableData[col - 1][day - 1] }}</div>
            </div>
          </div>
        </div>
        <div class="highlight-cell" :style="highlightCellStyle"></div>
        <div class="highlight-row" :style="highlightRowStyle"></div>
        <div class="highlight-col" :style="highlightColStyle"></div>
        <div class="popper" :style="popperStyle" ref="popper">
          <div class="popper-top">
            <div class="shift rest">休息</div>
            <div class="shift duty" v-for="n in 3" :key="n">科技班次（09:00 ~ 11:30,14:00 ~ 18:00）</div>
          </div>
          <div class="popper-bottom">
            <div style="text-align: center;cursor: pointer">
              <i style="font-size: 16px" class="el-icon-close"></i>
              <div style="font-size: 12px">清除</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@gray: #f2f3f5;
@borderColor: #dee0e3;
@highlightBorder: #3370ff;
@highlightBackground: #eff4ff;

.tag-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;

  i {
    cursor: pointer;
    font-size: 16px;
    color: #2b2f36;
    margin-left: 8px;
  }
}

.divider {
  width: 100%;
  border-top: 1px dashed rgba(31, 35, 41, .15);
  margin: 16px 0;
}

.search-container {
  display: flex;
  align-items: center;
}

.attendance-container {
  margin-top: 16px;
  display: flex;
  user-select: none;
  position: relative;
  width: 100%;

  .column-header {
    width: 120px;

    .cell {
      width: 120px;
      height: 48px;
      border: 1px solid @borderColor;
      border-top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .first {
      background: @gray;
      height: 60px;
      border-top: 1px solid @borderColor;
    }
  }

  .column-content {
    position: relative;
    max-width: calc(100% - 120px);
    width: fit-content;
    overflow-x: auto;

    .row-header {
      display: flex;
      width: fit-content;

      .cell {
        flex-shrink: 0;
        width: 48px;
        height: 60px;
        border: 1px solid @borderColor;
        border-left: 0;
        background: @gray;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }

    .content {
      width: fit-content;

      .row {
        display: flex;

        .cell {
          flex-shrink: 0;
          width: 48px;
          height: 48px;
          border: 1px solid @borderColor;
          border-left: 0;
          border-top: 0;
          padding: 3px;
          box-sizing: border-box;

          .cell-value {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
          }
        }
      }
    }

    .highlight-col {
      pointer-events: none;
      border: 1px solid @highlightBorder;
      position: absolute;
      display: none;
    }

    .highlight-row {
      pointer-events: none;
      border: 1px solid @highlightBorder;
      position: absolute;
      display: none;
    }

    .highlight-cell {
      pointer-events: none;
      border: 1px solid @highlightBorder;
      background: @highlightBackground;
      position: absolute;
      display: none;
    }

    .popper {
      position: absolute;
      width: 280px;
      scale: 0;
      z-index: 999;
      background: #ffffff;
      box-shadow: 0 8px 24px 8px rgba(31, 35, 41, .04), 0 6px 12px rgba(31, 35, 41, .04), 0 4px 8px -8px rgba(31, 35, 41, .06);
      border-radius: 4px;

      .popper-top {
        height: 160px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 8px;
        box-sizing: border-box;

        .shift {
          margin: 8px 0;
          border-radius: 4px;
          color: #1f2329;
          cursor: pointer;
          height: 24px;
          line-height: 24px;
          overflow: hidden;
          padding: 0 6px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .rest {
          background: rgb(239, 240, 241);
          width: fit-content;
        }

        .duty {
          background: rgb(248, 230, 171);
        }
      }

      .popper-bottom {
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid rgba(31, 35, 41, .15)
      }
    }
  }
}

.break {
  background: #eff0f1;
}
</style>